【vue源码系列2】vue组件是怎么变成真实dom的？

您所在的位置：网站首页 › vue 是如何把虚拟 dom 转化为真实的 dom 的 › 【vue源码系列2】vue组件是怎么变成真实dom的？

【vue源码系列2】vue组件是怎么变成真实dom的？

2023-03-30 23:38| 来源: 网络整理| 查看: 265

在开始看vue3源码之前，我最大的一个困惑就是，vue到底是怎么把组件变成dom的？各个模块之间是如何相互关联的？

如果你也有这样的困惑，那这篇文章将会告诉你答案。

{{msg}} const { createApp } = Vue const APP = { data() { return { msg: 1 } } } const app = createApp(APP) app.mount('#app') 复制代码

我们以这样一段代码为例。

今天来聊聊vue的createApp方法是怎么把vue组件变成真实dom的。

我们自己可以从需求出发，先分析一下。

createApp要做哪些事？

首先createApp是一个函数，接受一个对象参数。

其次createApp返回了一个对象，对象中有个mount方法。

根据这两点，我们可以很简单的写一个如下的createApp函数。

function createApp(app) { return { mount(el) { const dom = document.querySelector(el) dom.innerText = app.data().msg } } } 复制代码

但是这里有几个问题，一个是数据改变了，dom需要重新渲染。另一个是赋值操作，我们是写死的，这个应该根据语法判断。

所以我们至少要加上3个步骤。【伪代码】

function createApp(app) { return { mount(el) { const dom = document.querySelector(el) // 1.监听数据变化 const $proxy = new Proxy(app.data(), { get: () => {}, set: () => {} }) // 2.当数据变化时，更新dom updateComponent() // 3.语法分析，将值绑定到dom dom.innerText = app.data().msg } } } 复制代码

理解到这里，我们再去看看vue是如何实现的。

vue是如何渲染dom的？ 1.调用createApp方法，创建实例

跟我们自己写的demo类似，vue也是先创建一个实例，返回app对象。

只不过vue返回的app对象，上面定义了很多方法和属性。